.slider{
  color:black;
}


.slider > div[class=rc-slider-rail]{
  background-color:var(--text-secondary) !important;
  height: 6px;
}

.slider > div[class=rc-slider-track]{
  background-color:var(--text-primary) !important;
  // background-color: var(--slider-track-color) !important;
  height: 6px;
}

.slider > div[class=rc-slider-handle]{
  // border-color: var(--text-secondary);
  border: 1px solid var(--text-secondary);
  background-color:var(--background-primary);
  z-index: 1;
  height: 22px;
  width: 22px;
  margin-top: calc( (22 / 2 * 1px) - (14px + 5px));
  opacity: 1;
}

.slider > div[class="rc-slider-handle rc-slider-handle-dragging"]{
  border-color: gray;
  z-index: 1;
}

// Note: This disables the default bubbles which are used to click. This is replaced by | character
.slider > div[class=rc-slider-step]{
  display:none;
}

// Container for | characters
.slider > div[class=rc-slider-mark]{
  top:0;
}
  
